<!-- 原始数据包展示 -->
<template>
	<div class="container">
		<!-- 搜索条件 -->
		<yd-form :options="formOptions" :model="formData" :btns="formBtns"></yd-form>

		<!--查询列表-->
		<YdTable
			:formData="formData"
			:tableConfig="tableConfig"
			:tableData="tableData"
			ref="multipleTable"
			@sizeChangeHandler="queryFilterBusinessData"
			@currentChangeHandler="queryFilterBusinessData"
			@sortChangeHandler="queryFilterBusinessData"
			@selectionChangeHandler="handleSelectionChange"
		>
		</YdTable>

		<!-- 包体详情 -->
		<el-dialog title="包体详情" v-model="open" width="900px" append-to-body center>
			<el-row style="margin-bottom: 20px">
				<el-col :span="12">
					系统指标：
					<el-tag
						v-for="(tag, index) in dynamicTags1"
						:key="tag"
						class="mx-1"
						closable
						:disable-transitions="false"
						@close="handleClose(tag, 1, index)"
					>
						{{ tag.extractRule }}
					</el-tag>
					<el-input
						v-if="inputVisible1"
						v-model="indicatorForm.system.inputValue"
						placeholder="请输入"
						ref="InputRef1"
						class="input-with-select"
						size="small"
						@keyup.enter="handleInputConfirm(1, indicatorForm.system.inputValue, indicatorForm.system.inputValueSelect)"
					>
						<template #prepend>
							<el-select v-model="indicatorForm.system.inputValueSelect" placeholder="Select" style="width: 115px">
								<el-option v-for="(option, index) in sourceOptions" :key="index" :label="option.label" :value="option.value"> </el-option>
							</el-select>
						</template>
						<template #append>
							<el-icon style="cursor: pointer" @click="handleInputConfirm(1, indicatorForm.system.inputValue, indicatorForm.system.inputValueSelect)"
								><Plus
							/></el-icon>
						</template>
					</el-input>
					<el-button v-else class="button-new-tag ml-1" size="small" @click="showInput(1)"> 创建正则 </el-button>
				</el-col>
				<el-col :span="12">
					用户指标：
					<el-tag
						v-for="(tag, index) in dynamicTags2"
						:key="tag"
						class="mx-1"
						closable
						:disable-transitions="false"
						@close="handleClose(tag, 2, index)"
					>
						{{ tag.extractRule }}
					</el-tag>
					<el-input
						v-if="inputVisible2"
						v-model="indicatorForm.user.inputValue"
						placeholder="请输入"
						ref="InputRef2"
						class="input-with-select"
						size="small"
						@keyup.enter="handleInputConfirm(2, indicatorForm.user.inputValue, indicatorForm.user.inputValueSelect)"
					>
						<template #prepend>
							<el-select v-model="indicatorForm.user.inputValueSelect" placeholder="Select" style="width: 115px">
								<el-option v-for="(option, index) in sourceOptions" :key="index" :label="option.label" :value="option.value"> </el-option>
							</el-select>
						</template>
						<template #append>
							<el-icon style="cursor: pointer" @click="handleInputConfirm(2, indicatorForm.user.inputValue, indicatorForm.user.inputValueSelect)"
								><Plus
							/></el-icon>
						</template>
					</el-input>
					<el-button v-else class="button-new-tag ml-1" size="small" @click="showInput(2)"> 创建正则 </el-button>
				</el-col>
				<el-col :span="12" style="margin-top: 20px">
					业务指标：
					<el-tag
						v-for="(tag, index) in dynamicTags3"
						:key="tag"
						class="mx-1"
						closable
						:disable-transitions="false"
						@close="handleClose(tag, 3, index)"
					>
						{{ tag.extractRule }}
					</el-tag>
					<el-input
						v-if="inputVisible3"
						v-model="indicatorForm.business.inputValue"
						placeholder="请输入"
						ref="InputRef3"
						class="input-with-select"
						size="small"
						@keyup.enter="handleInputConfirm(3, indicatorForm.business.inputValue, indicatorForm.business.inputValueSelect)"
					>
						<template #prepend>
							<el-select v-model="indicatorForm.business.inputValueSelect" placeholder="Select" style="width: 115px">
								<el-option v-for="(option, index) in sourceOptions" :key="index" :label="option.label" :value="option.value"> </el-option>
							</el-select>
						</template>
						<template #append>
							<el-icon
								style="cursor: pointer"
								@click="handleInputConfirm(3, indicatorForm.business.inputValue, indicatorForm.business.inputValueSelect)"
								><Plus
							/></el-icon>
						</template>
					</el-input>
					<el-button v-else class="button-new-tag ml-1" size="small" @click="showInput(3)"> 创建正则 </el-button>
				</el-col>
				<el-col :span="12" style="margin-top: 20px">
					端到端学习指标：
					<el-tag
						v-for="(tag, index) in dynamicTags4"
						:key="tag"
						class="mx-1"
						closable
						:disable-transitions="false"
						@close="handleClose(tag, 4, index)"
					>
						{{ tag.extractRule }}
					</el-tag>
					<el-input
						v-if="inputVisible4"
						v-model="indicatorForm.end.inputValue"
						placeholder="请输入"
						ref="InputRef4"
						class="input-with-select"
						size="small"
						@keyup.enter="handleInputConfirm(4, indicatorForm.end.inputValue, indicatorForm.end.inputValueSelect)"
					>
						<template #prepend>
							<el-select v-model="indicatorForm.end.inputValueSelect" placeholder="Select" style="width: 115px">
								<el-option v-for="(option, index) in sourceOptions" :key="index" :label="option.label" :value="option.value"> </el-option>
							</el-select>
						</template>
						<template #append>
							<el-icon style="cursor: pointer" @click="handleInputConfirm(4, indicatorForm.end.inputValue, indicatorForm.end.inputValueSelect)"
								><Plus
							/></el-icon>
						</template>
					</el-input>
					<el-button v-else class="button-new-tag ml-1" size="small" @click="showInput(4)"> 创建正则 </el-button>
				</el-col>
			</el-row>
			<el-form :model="queryOpenParams" ref="queryOpenForm" :inline="true">
				<el-form-item label="" prop="matching">
					<el-input v-model="queryOpenParams.matching" clearable size="small" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="Search" size="small" @click="openSearchHandler">搜索</el-button>
					<el-button type="primary" icon="Finished" size="small" @click="javaCheckHandler">java校验</el-button>
					<el-button type="primary" icon="Finished" size="small" @click="regularHandler">探针校验</el-button>
					<el-button type="primary" icon="Finished" size="small" @click="regexpConfirm">确认</el-button>
				</el-form-item>
			</el-form>
			<el-row>
				<el-col :span="12">
					<el-card shadow="never" class="box-card">
						<div slot="header" class="clearfix">
							<span>Java检验结果</span>
						</div>
						<div class="card-content">
							<div v-for="o in javaRegular" class="text item">
								{{ o }}
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="12">
					<el-card shadow="never" class="box-card">
						<div slot="header" class="clearfix">
							<span>探针校验结果</span>
						</div>
						<div class="card-content">
							<div v-for="o in rightPanel" class="text item">
								{{ o }}
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="20" style="margin-top: 20px">
					<h3>{{ oriTitle }}: {{ oriString }}</h3>
				</el-col>
				<el-col :span="4" style="text-align: right; margin-top: 10px">
					<el-switch v-model="isColumn" class="ml-2" width="60" @change="isColumnChange" inline-prompt active-text="并列" inactive-text="并排" />
				</el-col>
			</el-row>
			<el-row>
				<el-card shadow="never" style="width: 100%">
					<el-row>
						<el-col :span="24">
							<div slot="header" class="clearfix">
								<span>包体信息 (可替换内容后进行校验)</span>
								<span style="float: right; padding: 3px 0">{{ textTitle }}</span>
							</div>
						</el-col>
						<el-col :span="isColumn ? 24 : 12">
							<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" v-model="requestBodyContextTextarea"> </el-input>
						</el-col>
						<el-col :span="isColumn ? 24 : 12">
							<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" v-model="responseBodyContextTextarea"> </el-input>
						</el-col>
					</el-row>
				</el-card>
				<!-- <el-col :span="24">
					<div ref="coderef" class="code"></div>
				</el-col> -->
			</el-row>
			<template #footer class="dialog-footer">
				<el-button @click="cancelHandle">取 消</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="OriginalPacketDisplay" lang="tsx">
import {
	getFilterBusinessData,
	deleteByIds,
	downloadAll,
	downloadOne,
	filterDetails,
	queryIndexExtractRuleByresourceCode,
	addIndexExtractRule,
} from '@/api/management/packagesAnalysis/originalPacketDisplay';
import { parseTime, downloadCustom } from '@/utils/common';
import { ref, reactive, onMounted, nextTick, computed, ComputedRef, watch } from 'vue';
import { useRoute } from 'vue-router';
import useCurrentInstance from '@/utils/useCurrentInstance';
import { ElInput, ElMessage } from 'element-plus';
import { queryDictByType } from '@/api/search/searchOptions';
import Router from '@/router';
// codemirror 插件
// import { MergeView } from '@codemirror/merge';
// import { EditorView, basicSetup } from 'codemirror';
// import { EditorState } from '@codemirror/state';
// import { javascript } from '@codemirror/lang-javascript';
// import { oneDark } from '@codemirror/theme-one-dark';

const { proxy } = useCurrentInstance();
const route = useRoute();
// 包体详情是否并列展示
let isColumn = ref(false);
// 选中数组
const ids = ref([]);
// 非单个禁用
const single = ref(true);
// 非多个禁用
const multiple = ref(true);
// 弹出层标题
const title = ref('');
const open = ref(false);
const isPackage = ref(false);
if (route.query.isPackage === '1') {
	isPackage.value = true;
}
const formOptions = reactive<FormOptionType>([
	{
		type: 'select',
		label: '规则名称',
		prop: 'filterId',
		selectKey: 'value',
		isInitValue: false,
		api: {
			name: 'queryRuleNameSelect',
		},
	},
	{
		type: 'select',
		label: '协议类型',
		prop: 'protocol',
		selectKey: 'id',
		selectLabel: 'label',
		isInitValue: false,
		attrs: {
			clearable: true,
		},
		api: {
			name: 'queryProtocolSelect',
		},
	},
	{
		type: 'input',
		label: '业务服务资源编码',
		prop: 'bussType',
		attrs: {
			clearable: true,
			disabled: isPackage.value,
		},
	},
	{
		type: 'input',
		label: '业务资源匹配串',
		prop: 'identifyStr',
		attrs: {
			clearable: true,
			disabled: isPackage.value,
		},
	},
	{
		type: 'input',
		label: 'session Id',
		prop: 'sessionId',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'input',
		label: '请求IP:PORT',
		prop: 'requestIpPort',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'input',
		label: '响应IP:PORT',
		prop: 'responseIpPort',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'input',
		label: '专属指标',
		prop: 'bussinessDetailMesg',
		attrs: {
			clearable: true,
		},
	},
]);
const formBtns = reactive<BtnType[]>([
	{
		type: 'primary',
		text: '查询',
		handler: searchDataHandler,
	},
]);
let queryOpenParams = reactive<anyObj>({});
// 搜索表单数据
let formData = reactive<anyObj>({
	...route.query,
	filterId: route.query.filterId ? route.query.filterId : undefined,
});
if (route.query.resourceCode) {
	formData.bussType = route.query.resourceCode;
}

// 列表配置
let tableConfig = reactive({
	url: getFilterBusinessData,
	columns: [
		{
			label: '业务服务资源编码',
			prop: 'bussType',
			render: (row: anyObj, val: ApiVal) => {
				return (
					<router-link to={'/management/indicatorManage/proprietaryIndicatorManage/detail?resourceCode=' + val} class="link-type">
						<span>{val}</span>
					</router-link>
				);
			},
		},
		{
			label: '业务资源匹配串',
			prop: 'discResourceIdent',
		},
		{
			label: '协议类型',
			prop: 'protocol',
		},
		{
			label: 'SESSIONID',
			prop: 'sessionId',
		},
		{
			label: '专属指标',
			prop: 'bussinessDetailMesg',
		},
		{
			label: '请求IP:端口',
			prop: 'requestIpPort',
		},
		{
			label: '响应IP:端口',
			prop: 'responseIpPort',
		},
		{
			label: '请求开始时间',
			prop: 'startTvSec',
			formatter(row: anyObj, val: number) {
				return parseTime(val / 1000);
			},
		},
		{
			label: '响应结束时间',
			prop: 'endTvSec',
			formatter(row: anyObj, val: number) {
				return parseTime(val / 1000);
			},
		},
		{
			label: '操作',
			prop: '',
			operation: [
				{
					text: '包体详情',
					handler: (scope: anyObj) => handleSearchDetails(scope.row),
				},
				{
					text: '删除',
					handler: (scope: anyObj) => deleteHandle(scope.row),
					permi: ['metadata:dataShow:delete'],
				},
				{
					text: '下载样包',
					handler: (scope: anyObj) => handleSearchBodyContext(scope.row),
					permi: ['metadata:dataShow:download'],
				},
			],
		},
	],
	// 工具栏
	toolBar: [
		{ name: '删除', icon: 'yd-icon-delete', permi: ['metadata:dataShow:delete'], disable: 'multiple', handler: () => deleteHandle(undefined) },
		{ name: '打包下载', icon: 'yd-icon-export', permi: ['metadata:dataShow:export'], disable: 'multiple', handler: () => uploadHandle() },
		{
			name: '包体正则表达式校验',
			icon: 'yd-icon-list',
			disable: 'single',
			handler: () => packgeDetailHandle(),
		},
	],
	// 开启复选框
	enableSelection: true,
	// 开启分页
	pagination: {
		pageNum: 1,
		pageSize: 10,
		total: 0,
	},
	// 加载层
	loading: true,
});
// 列表数据
let tableData = ref<anyObj>([]);
const rightPanel = ref(['无匹配结果']);
const javaRegular = ref(['无匹配结果']);
const textarea = ref('');
const requestBodyContextTextarea = ref('');
const responseBodyContextTextarea = ref('');
const textTitle = ref('当前共查询到匹配值0个');
const queryOpenForm = ref<anyObj>();
const msgType = ref(0);
const oriString = ref('');
const bussType = ref('');
// 1：系统， 2：用户，3：业务，4：端到端，
const indicatorForm = reactive({
	system: {
		inputValue: '',
		inputValueSelect: '',
	},
	user: {
		inputValue: '',
		inputValueSelect: '',
	},
	business: {
		inputValue: '',
		inputValueSelect: '',
	},
	end: {
		inputValue: '',
		inputValueSelect: '',
	},
});
const dynamicTags1 = ref([] as any);
const dynamicTags2 = ref([] as any);
const dynamicTags3 = ref([] as any);
const dynamicTags4 = ref([] as any);
const inputVisible1 = ref(false);
const inputVisible2 = ref(false);
const inputVisible3 = ref(false);
const inputVisible4 = ref(false);
const InputRef1 = ref<InstanceType<typeof ElInput>>();
const InputRef2 = ref<InstanceType<typeof ElInput>>();
const InputRef3 = ref<InstanceType<typeof ElInput>>();
const InputRef4 = ref<InstanceType<typeof ElInput>>();
const sourceOptions = ref([]);
const indicatorApiParams = ref([]);

const handleClose = (tag: string, val: number, ind: number) => {
	if (val === 1) {
		dynamicTags1.value.splice(ind, 1);
	} else if (val === 2) {
		dynamicTags2.value.splice(ind, 1);
	} else if (val === 3) {
		dynamicTags3.value.splice(ind, 1);
	} else if (val === 4) {
		dynamicTags4.value.splice(ind, 1);
	}
};

const showInput = (val: number) => {
	if (val === 1) {
		inputVisible1.value = true;
		nextTick(() => {
			InputRef1.value!.input!.focus();
		});
	} else if (val === 2) {
		inputVisible2.value = true;
		nextTick(() => {
			InputRef2.value!.input!.focus();
		});
	} else if (val === 3) {
		inputVisible3.value = true;
		nextTick(() => {
			InputRef3.value!.input!.focus();
		});
	} else if (val === 4) {
		inputVisible4.value = true;
		nextTick(() => {
			InputRef4.value!.input!.focus();
		});
	}
};

const handleInputConfirm = (val: number, extractRule: string, indexSource: string) => {
	let obj = {
		// bussType: formData.resourceCode,
		bussType: bussType.value,
		indexType: val,
		indexSource: indexSource,
		extractRule: extractRule,
	};
	if (val === 1) {
		if (indicatorForm.system.inputValue) {
			dynamicTags1.value.push(obj);
		}
		inputVisible1.value = false;
		indicatorForm.system.inputValue = '';
		indicatorForm.system.inputValueSelect = sourceOptions.value[0].value;
	} else if (val === 2) {
		if (indicatorForm.user.inputValue) {
			dynamicTags2.value.push(obj);
		}
		inputVisible2.value = false;
		indicatorForm.user.inputValue = '';
		indicatorForm.user.inputValueSelect = sourceOptions.value[0].value;
	} else if (val === 3) {
		if (indicatorForm.business.inputValue) {
			dynamicTags3.value.push(obj);
		}
		inputVisible3.value = false;
		indicatorForm.business.inputValue = '';
		indicatorForm.business.inputValueSelect = sourceOptions.value[0].value;
	} else if (val === 4) {
		if (indicatorForm.end.inputValue) {
			dynamicTags4.value.push(obj);
		}
		inputVisible4.value = false;
		indicatorForm.end.inputValue = '';
		indicatorForm.end.inputValueSelect = sourceOptions.value[0].value;
	}
};
/**
 * 来源下拉框
 */
function initSourceOptions() {
	queryDictByType('indicator_source').then((res: ApiResponse) => {
		sourceOptions.value = res.data;
		if (sourceOptions.value && sourceOptions.value.length > 0) {
			indicatorForm.system.inputValueSelect = sourceOptions.value[0].value;
			indicatorForm.user.inputValueSelect = sourceOptions.value[0].value;
			indicatorForm.business.inputValueSelect = sourceOptions.value[0].value;
			indicatorForm.end.inputValueSelect = sourceOptions.value[0].value;
		}
	});
}
/**
 * 指标提取规则查询
 */
function queryIndexExtractRuleByresourceCodeFn() {
	dynamicTags1.value = [];
	dynamicTags2.value = [];
	dynamicTags3.value = [];
	dynamicTags4.value = [];
	// queryIndexExtractRuleByresourceCode(formData.bussType).then((res: ApiResponse) => {
	queryIndexExtractRuleByresourceCode(bussType.value).then((res: ApiResponse) => {
		if (res.code === 0) {
			res.data.forEach((item: any) => {
				item.id = null;
				if (item.indexType === 1) {
					dynamicTags1.value.push(item);
				} else if (item.indexType === 2) {
					dynamicTags2.value.push(item);
				} else if (item.indexType === 3) {
					dynamicTags3.value.push(item);
				} else if (item.indexType === 4) {
					dynamicTags4.value.push(item);
				}
			});
		}
	});
}
/**
 * 新增正则tag后确认按钮
 */
function regexpConfirm() {
	addIndexExtractRule([...dynamicTags1.value, ...dynamicTags2.value, ...dynamicTags3.value, ...dynamicTags4.value]).then((res: ApiResponse) => {
		if (res.code === 0) {
			ElMessage.success('确认成功');
		}
	});
}
const oriTitle = computed(() => {
	switch (msgType.value) {
		case 22:
			return '原始URL';
		case 23:
			return '原始API';
		case 24:
			return '原始SQL';
	}
});

/*搜索*/
function searchDataHandler() {
	tableConfig.pagination.pageNum = 1;
	queryFilterBusinessData();
}
/*查询原始数据包展示与分析*/
function queryFilterBusinessData() {
	tableConfig.loading = true;
	getFilterBusinessData(formData).then((res: ApiResponse) => {
		tableConfig.loading = false;
		if (res.data) {
			tableData.value = res.data.records;
			tableData.value.forEach((item: anyObj, i: number) => {
				if (item.discResourceIdent == '') {
					item.discResourceIdent = item.name;
				}
			});
			tableConfig.pagination.total = res.data.total;
		} else {
			tableData.value = [];
			tableConfig.pagination.total = 0;
		}
	});
}
function clearHandle() {
	reset();
	title.value = '清除数据包';
}
/**
 * 包体详情的请求体和响应体并排与否change()
 * @param val
 */
function isColumnChange(val: any) {
	console.log(val);
}
/** 下载按钮操作 */
function uploadHandle() {
	downloadAll(ids.value).then((response) => {
		downloadCustom(response, 'temp原始数据包', 'zip');
	});
}
/** 删除按钮操作 */
function deleteHandle(row: anyObj | undefined) {
	let params: any = [];
	if (row) {
		params.push(row.id);
	} else {
		params = ids.value;
	}
	proxy.$modal
		.confirm('确定删除吗?', '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			cancelButtonClass: 'confirm-rigth-cancel-button',
			type: 'warning',
		})
		.then(() => {
			deleteByIds(params).then((res: ApiResponse) => {
				if (res.code === 0) {
					proxy.$modal.msgSuccess('删除成功');
					searchDataHandler();
				} else {
					proxy.$modal.msgWarning(res.msg);
				}
			});
		})
		.catch(() => {});
}
/*包体正则表达式校验*/
function packgeDetailHandle() {
	reset();
	filterDetails(ids.value).then((res: ApiResponse) => {
		if (res.code === 0) {
			const data = res.data[0];
			textarea.value = '请求包体:\n' + data.requestBodyContext + '\n响应包体:\n' + data.responseBodyContext;
			open.value = true;
		}
	});
}
/*包体详情*/
function handleSearchDetails(row: anyObj) {
	reset();
	filterDetails(row.id).then((res: ApiResponse) => {
		if (res.code === 0) {
			const data = res.data[0];
			textarea.value = '请求包体:\n' + data.requestBodyContext + '\n响应包体:\n' + data.responseBodyContext;
			requestBodyContextTextarea.value = '请求包体:\n' + data.requestBodyContext;
			responseBodyContextTextarea.value = '响应包体:\n' + data.responseBodyContext;
			open.value = true;
			msgType.value = res.data[0].msgType;
			oriString.value = res.data[0].oriString;
			bussType.value = res.data[0].bussType;
			queryIndexExtractRuleByresourceCodeFn();
		}
	});
}
/*下载样包*/
function handleSearchBodyContext(row: anyObj) {
	downloadOne(row.id).then((response) => {
		downloadCustom(response, row.bussType + row.sessionId, 'txt');
	});
}
/**多选框选中数据*/
function handleSelectionChange(selection: any) {
	ids.value = selection.map((item: anyObj) => item.id);
	single.value = selection.length !== 1;
	multiple.value = !selection.length;
}
/*取消*/
function cancelHandle() {
	open.value = false;
}
function reset() {
	queryOpenParams.matching = '';
	rightPanel.value = ['无匹配结果'];
	javaRegular.value = ['无匹配结果'];
	textarea.value = '';
	textTitle.value = '当前共查询到匹配值0个';
	queryOpenForm.value?.resetFields();
}
/*包体详情搜索*/
function openSearchHandler() {
	try {
		javaRegular.value = ['无匹配结果'];
		rightPanel.value = ['无匹配结果'];
		const matching = queryOpenParams.matching;
		if (
			matching != null &&
			matching !== '' &&
			matching !== undefined &&
			textarea.value != null &&
			textarea.value !== '' &&
			textarea.value !== undefined
		) {
			let reg = new RegExp(matching, 'g');
			const textar = textarea.value;
			const data = textar.match(reg);
			let length = 0;
			if (data != null) {
				length = data.length;
			}
			textTitle.value = '当前共查询到匹配值' + length + '个';
		} else {
			textTitle.value = '当前共查询到匹配值0个';
		}
	} catch (e) {
		proxy.$modal.msgError('正则表达式有误');
	}
}
/*java校验*/
function javaCheckHandler() {
	try {
		textTitle.value = '当前共查询到匹配值0个';
		rightPanel.value = ['无匹配结果'];
		const matching = queryOpenParams.matching;
		if (isNull(matching) && isNull(textarea.value)) {
			let reg = new RegExp(check(matching), 'g');
			let data = textarea.value.match(reg);
			if (data != null) {
				javaRegular.value = ['当前共查询到匹配值' + data.length + '个', '匹配结果：'];
				for (let i = 0; i < data.length; i++) {
					javaRegular.value.push(data[i]);
				}
			}
		} else {
			javaRegular.value = ['无匹配结果'];
		}
	} catch (e) {
		proxy.$modal.msgError('正则表达式有误');
	}
}
/*探针校验*/
function regularHandler() {
	try {
		textTitle.value = '当前共查询到匹配值0个';
		javaRegular.value = ['无匹配结果'];
		const matching = queryOpenParams.matching;
		if (isNull(matching) && isNull(textarea.value)) {
			let reg = new RegExp(check(matching), 'g');
			let data = textarea.value.match(reg);
			let length = 0;
			if (data != null) {
				let regnew = new RegExp(matching);
				rightPanel.value = ['匹配结果：'];
				for (let i = 0; i < data.length; i++) {
					let d: any = data[i].match(regnew);
					if (isNull(d[1])) {
						rightPanel.value.push(d[1]);
						length++;
					}
				}
				rightPanel.value.unshift('当前共查询到匹配值' + length + '个');
			}
		} else {
			rightPanel.value = ['无匹配结果'];
		}
	} catch (e) {
		proxy.$modal.msgError('正则表达式有误');
	}
}
function isNull(value: any) {
	return value != null && value !== '' && value !== undefined;
}
function check(detial: any) {
	detial = detial.replace(/\[/g, '([');
	detial = detial.replace(/\]\+/g, ']+)');
	return detial;
}

const coderef = ref(null);
const codeMirrorInstance = ref<any>(null);
onMounted(() => {
	formData.filterId = route.query.filterId ? route.query.filterId : undefined;
	searchDataHandler();
	initSourceOptions();
});
// watch(
// 	() => open.value,
// 	(newVal) => {
// 		if (newVal) {
// 			import('@codemirror/view').then((CodeMirrorView) => {
// 				codeMirrorInstance.value = new CodeMirrorView.EditorView({
// 					state: EditorState.create({
// 						doc: requestBodyContextTextarea.value,
// 						extensions: [basicSetup, javascript(), oneDark],
// 					}),
// 					lineWrapping: true, // 设置换行属性为true
// 					parent: coderef.value,
// 				});
// 			});
// 		} else {
// 			codeMirrorInstance.value = null;
// 			coderef.value = null;
// 			dynamicTags1.value = [];
// 			dynamicTags2.value = [];
// 			dynamicTags3.value = [];
// 			dynamicTags4.value = [];
// 			inputVisible1.value = false;
// 			inputVisible2.value = false;
// 			inputVisible3.value = false;
// 			inputVisible4.value = false;
// 		}
// 	},
// 	{ immediate: true, deep: true }
// );
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
	margin: 10px;
}

.clear-data-radio {
	:deep .el-radio-group {
		line-height: 3;
		font-size: 16px;
	}

	:deep .el-radio__label {
		font-size: 16px;
	}
}

.icon-style {
	vertical-align: middle;
	font-size: 22px;
	margin-left: 20px;
}

.text {
	font-size: 14px;
}

.item {
	margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: '';
}

.clearfix:after {
	clear: both;
}

.box-card {
	height: 220px;
}

.card-content {
	height: 200px;
	overflow: auto;
}
// codemirror插件
.code {
	width: 100%;
	height: 300px;
}
.ͼ1 .cm-merge-b .cm-changedLine {
	background: #ddfbe6;
}
.ͼ1 .cm-merge-b .cm-changedText {
	background: #c6efd0;
}
.cm-merge-revert {
	display: none;
}
.cm-merge-a .cm-changedText,
.cm-deletedChunk .cm-deletedText {
	background: #eac3cc;
}
.cm-changeGutter {
	width: 100%;
}
.cm-changeGutter {
	position: absolute;
	left: 0;
	z-index: -1;
}
.cm-merge-b .cm-changedLineGutter {
	background: #ddfbe6;
}
.cm-merge-a .cm-changedLineGutter,
.cm-deletedLineGutter {
	background: #f9d7dc;
}
.cm-merge-a .cm-changedLine,
.cm-deletedChunk {
	background: #fbe9eb;
}
.cm-merge-b .cm-changedLine {
	background: #ecfdf0;
}
.cm-line {
	padding: 2px 2px 0 6px;
	padding-left: 40px;
	position: relative;
	font-size: 12px;
}
.cm-merge-a .cm-changedLine::before {
	content: '-';
	display: inline-block;
	position: absolute;
	left: 10px;
	color: #9bb0a1;
}

.cm-merge-b .cm-changedLine::before {
	content: '+';
	display: inline-block;
	position: absolute;
	left: 10px;
	color: #9bb0a1;
}
.cm-lineNumbers .cm-gutterElement {
	/* padding: 2px 3px 0 5px; */
	color: rgba(0, 0, 0, 0.3);
}
.cm-merge-revert {
	display: none;
}
.cm-gutters {
	padding-left: 30px;
}
.cm-content {
	padding: 0;
}
.CodeMirror-hints {
	z-index: 3000 !important;
}
</style>
